<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/*选择器  抓取页面上的元素 给元素添加效果【添加一个样式】  元素选择器*/
			div{
				/*边框复合属性  生成1个像素实线橙色的边框*/
				border: 1px solid #ff0000;
				width: 500px;
				height: 500px;
			}
			/* 需求：第二个div边框颜色改为黑色*/
			/*id选择器：html元素前标记加id="别名" 
			           css中 #别名  抓到元素
			  class选择器：html元素前标记加class="别名1 别名2"
			              css中.别名 抓元素
			  */
			  #d2{
				  border: 40px solid #000;
				  background-color: #00 0;
				  /*子属性：border-style 边框样式属性*/
				  border-style: dotted;
				  /*需求： 第二个div 样式 实线改为点线*/
				  /*虚线 双实线*/
				  borde-style: dashed;
				  borde-style: double;
			  }
			  .d4{
				  /*border边框属性【复合属性】 withd height color;*/
				  
				  /*子属性  border-withd  边框的宽度属性*/
				  /*需求： 第三个div 40px*/
				  border-wid th: 20px;
				  /*需求： 上边框宽度20px 点线*/
				  border-to p: 20px dotted #f00;
				  /*需求： 上边框宽度加颜色*/
				  border-top-co lor: #ff0;
				  /*需求： 下边框宽度10px */
				  border-bot tom: 10px;
				  /*需求： 左边框双实线效果*/
				  border-le ft: double;
				  /*需求： 右边框宽度5px 虚线 绿色*/
				  border-right: 10px solid #00ff00 ;
				  border-radius: 50%;
				  border-top-color: #f00;
				  border-bottom-color:  #55ff7f;
				  border-left-color:  #ffaaff;
				  border-right-color:  #00aaff;
				  /*过度属性：悬停效果增加过度时间*/
				  transition: transform 10s;
			  }
			  /*第三个div追加悬停效果*/
			  .d4:hover{
				  /*效果：旋转*/
				  /*转换属性：属性值*/
				  transform: rotate(180deg);
			  }
			   /*border-radius边框倒角属性：边框或者背景颜色
			   画图：宽高与倒角一致
			   border-radius属性值：1个值 代表 上   右   下  左【顺时针】
			                       2个值 代表 上   下 | 右  左【顺时针】
								   3个值 代表 上 | 右   左  下【顺时针】
								   4个值 代表 上 |右 |下 |左【顺时针】
	           练习：画一个圆 有四种颜色 鼠标悬停 旋转
			   第三个div 添加 悬停效果   伪类选择器：追加效果
			                                 语法： 任意选择器：hover  悬停效果 功能
			   */
			  #d1{
				  border: 40px solid #7c787f;
				  /*需求： 第一个div 颜色改为灰色*/
				  border-radius:500px 0px ;
			  }
		</style>
	</head>
	<body>
		<!--div：有宽没高的空间
		    css边框的使用  选择器-->
		<div id="d1"></div>
		<div id="d2"></div>
		<div class="d3 d4"></div>
	</body>
</html>